* {
  margin: 0;
  padding: 0;
}

img {
  display: block;
}

ul {
  list-style: none;
}

.king {
  width: 852px;
  margin: 100px auto;
  background: url(images/bg.png) no-repeat;
  overflow: hidden;
  padding: 10px;
}

.king li {
  position: relative;
  float: left;
  width: 69px;
  height: 69px;
  margin-right: 10px;
  transition: all 0.5s;
  overflow: hidden;
}

.king li:hover {
  width: 224px;
}

.king .big {
  opacity: 0;
  transition: all 0.5s;
}

.king li:hover .big {
  opacity: 1;
}

.king .small {
  position: absolute;
  top: 0;
  left: 0;
  width: 69px;
  height: 69px;
  border-radius: 5px;
  transition: all 0.5s;
}

.king li:hover .small {
  opacity: 0;
}
